/**
 * Created by YIn on 2017/11/27.
 */
// $(function(){
var data = [
    ["0", 0], ["0", 0], ["0", 0],
    ["0", 0], ["0", 0], ["0", 0], ["0", 0]
];
var dateList = data.map(function (item) {
    return item[0];
});
var valueList = data.map(function (item) {
    return item[1];
});

var traffic = echarts.init(document.getElementById('traffic'));
traffic_option = {
    textStyle: {
        color: '#dedec5'
    },
    // Make gradient line here
    visualMap: [{
        show: false,
        type: 'continuous',
        seriesIndex: 0,
        min: 0,
        max: 400
    }, {
        show: false,
        type: 'continuous',
        seriesIndex: 1,
        dimension: 0,
        min: 0,
        // max: dateList.length - 1
        max: 7
    }],
    title: [{
        left: 'center',
        text: '核心交换数据',
        textStyle: {
            color: '#dedec5'
        }
    }, {
        top: '55%',
        left: 'center',
        text: '防火墙流量',
        textStyle: {
            color: '#dedec5'
        }
    }],
    tooltip: {
        trigger: 'axis',
        formatter: "上行: {c}MB<br>下行: {c1}MB"
    },
    xAxis: [{
        data: dateList
    }, {
        data: dateList,
        gridIndex: 1
    }],
    yAxis: [{
        splitLine: {show: false}
    }, {
        splitLine: {show: false},
        gridIndex: 1
    }],
    grid: [{
        bottom: '60%'
    }, {
        top: '60%'
    }],
    series: [{
        type: 'line',
        showSymbol: true,
        data: [],
        color: 'red',
        lineStyle: {
            normal: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#fea700' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#fee140' // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                }
            }
        },
    }, {
        type: 'line',
        showSymbol: true,
        data: [],
        lineStyle: {
            normal: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#13fb7d' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#00feba' // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                }
            }
        }
    }, {
        type: 'line',
        showSymbol: true,
        data: valueList,
        xAxisIndex: 1,
        yAxisIndex: 1,
        lineStyle: {
            normal: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#2af598' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#009efd' // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                }
            }
        }
    }, {
        type: 'line',
        showSymbol: true,
        data: [87, 87, 441, 12, 154, 48, 770],
        xAxisIndex: 1,
        yAxisIndex: 1,
        lineStyle: {
            normal: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#6a11cb' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#2575fc' // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                }
            }
        }
    }]
};
traffic.setOption(traffic_option);

// getflow();

// setInterval(function () {
//     getflow();
// }, 1000 * 60 * 5);

// function getflow() {
//     return $.get('/flow/', function (data) {
//         var $this.hour_interval_flow = data.hour_interval_flow;
//         var fw_tx = []; // 防火墙上行
//         var fw_rx = []; // 防火墙下行
//         var sw_tx = []; // 交换机上行
//         var sw_rx = []; // 交换机下行
//         var time = []; // 时间点
//         for (var i = 0; i < $this.hour_interval_flow.length; i++) {
//             fw_tx.push(($this.hour_interval_flow[i].fw_tx / 1024 / 1024).toFixed(2));
//             fw_rx.push(($this.hour_interval_flow[i].fw_rx / 1024 / 1024).toFixed(2));
//             sw_tx.push(($this.hour_interval_flow[i].sw_tx / 1024 / 1024).toFixed(2));
//             sw_rx.push(($this.hour_interval_flow[i].sw_rx / 1024 / 1024).toFixed(2));
//             time.push($this.hour_interval_flow[i].time);
//         }
//         // console.log(fw_tx);
//         fw_tx = fw_tx.reverse();
//         fw_rx = fw_rx.reverse();
//         sw_tx = sw_tx.reverse();
//         sw_rx = sw_rx.reverse();
//         time = time.reverse();
//         traffic_option.xAxis[0].data = time;
//         traffic_option.xAxis[1].data = time;
//         traffic_option.series[0].data = sw_tx; // 核心交换机数据上行
//         traffic_option.series[1].data = sw_rx; // 核心交换机数据下行
//         traffic_option.series[2].data = fw_tx; // 防火墙数据上行
//         traffic_option.series[3].data = fw_rx; // 防火墙数据下行
//         traffic.setOption(traffic_option)
//     });
// }
window.addEventListener("resize", function () {
    traffic.resize();
});
// });
// setInterval(function () {
//     $.get('/sys_info/', function (data) {
//         dashboard_option.series[0].data[0].value = data.cpu_percent;
//         dashboard_option.series[1].data[0].value = data.mem_percent;
//         dashboard_option.series[2].data[0].value = data.disk_percent;
//         dashboard.setOption(dashboard_option);
//     });
// }, 2000);

// var ws_flow = WebS('/flow/');
//
// ws_flow.addEventListener('open', function(){
//     console.log('flow 连接成功');
// });
// ws_flow.addEventListener('close', function(){
//     console.log('flow 连接关闭');
// });
// ws_flow.addEventListener('error', function(){
//     console.log('flow error');
// });
// ws_flow.addEventListener('message', function(evt){
//     // console.log(evt);
//     var $this = JSON.parse(evt.data);
//     // console.log($this.hour_interval_flow);
//         var fw_tx = []; // 防火墙上行
//         var fw_rx = []; // 防火墙下行
//         var sw_tx = []; // 交换机上行
//         var sw_rx = []; // 交换机下行
//         var time = []; // 时间点
//         for (var i = 0; i < $this.hour_interval_flow.length; i++) {
//             fw_tx.push(($this.hour_interval_flow[i].fw_tx / 1024 / 1024).toFixed(2));
//             fw_rx.push(($this.hour_interval_flow[i].fw_rx / 1024 / 1024).toFixed(2));
//             sw_tx.push(($this.hour_interval_flow[i].sw_tx / 1024 / 1024).toFixed(2));
//             sw_rx.push(($this.hour_interval_flow[i].sw_rx / 1024 / 1024).toFixed(2));
//             time.push($this.hour_interval_flow[i].time);
//         }
//         // console.log(fw_tx);
//         fw_tx = fw_tx.reverse();
//         fw_rx = fw_rx.reverse();
//         sw_tx = sw_tx.reverse();
//         sw_rx = sw_rx.reverse();
//         time = time.reverse();
//         traffic_option.xAxis[0].data = time;
//         traffic_option.xAxis[1].data = time;
//         traffic_option.series[0].data = sw_tx; // 核心交换机数据上行
//         traffic_option.series[1].data = sw_rx; // 核心交换机数据下行
//         traffic_option.series[2].data = fw_tx; // 防火墙数据上行
//         traffic_option.series[3].data = fw_rx; // 防火墙数据下行
//         traffic.setOption(traffic_option)
// });

const FLOW = yin_webs('/flow/');
FLOW.onmessage = (msg) => {
    let $this = JSON.parse(msg.data);
    // console.log($this.hour_interval_flow);
        let fw_tx = []; // 防火墙上行
        let fw_rx = []; // 防火墙下行
        let sw_tx = []; // 交换机上行
        let sw_rx = []; // 交换机下行
        let time = []; // 时间点
        for (let i = 0; i < $this.hour_interval_flow.length; i++) {
            fw_tx.push(($this.hour_interval_flow[i].fw_tx / 1024 / 1024).toFixed(2));
            fw_rx.push(($this.hour_interval_flow[i].fw_rx / 1024 / 1024).toFixed(2));
            sw_tx.push(($this.hour_interval_flow[i].sw_tx / 1024 / 1024).toFixed(2));
            sw_rx.push(($this.hour_interval_flow[i].sw_rx / 1024 / 1024).toFixed(2));
            time.push($this.hour_interval_flow[i].time);
        }
        // console.log(fw_tx);
        fw_tx = fw_tx.reverse();
        fw_rx = fw_rx.reverse();
        sw_tx = sw_tx.reverse();
        sw_rx = sw_rx.reverse();
        time = time.reverse();
        traffic_option.xAxis[0].data = time;
        traffic_option.xAxis[1].data = time;
        traffic_option.series[0].data = sw_tx; // 核心交换机数据上行
        traffic_option.series[1].data = sw_rx; // 核心交换机数据下行
        traffic_option.series[2].data = fw_tx; // 防火墙数据上行
        traffic_option.series[3].data = fw_rx; // 防火墙数据下行
        traffic.setOption(traffic_option)
};